<!-- 会员卡 -->
<template>
  <div class="members">
    <div class="img-name">
      <img src="/static/images/user-name.png" />
    </div>
    <div class="kaitong">
      <p @click="dredge">立即开通</p>
    </div>
    <div class="div-3"></div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    dredge() {
      wx.navigateTo({
        url: "/pages/open/main"
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.members {
  display: flex;
  margin-top: 40rpx;
}
.img-name {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0.33;
}
.img-name > img {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
}
.div-3 {
  flex: 0.33;
}
.kaitong {
  display: flex;
  justify-content: center;
  flex: 0.33;
}
.kaitong > p {
  width: 200rpx;
  height: 80rpx;
  font-size: 32rpx;
  color: #ffffff;
  line-height: 80rpx;
  text-align: center;
  border-radius: 30rpx;
  background-color: #ff634e;
}
</style>